<head th:fragment="header">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>嘻嘻嘻哈哈哈博客</title>
    <meta name="keywords" content="木庄网络博客,IT技术,网络推广,编程技术,网站模板,SEO优化"/>
    <meta name="description" content="木庄网络博客，互联网创业浪潮中关注IT技术、站长、网络推广等资讯以及技术的记录与分享。"/>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/css/blog/blog.css">
    <link rel="stylesheet" type="text/css" href="/css/blog/pagination.css">
    <link rel="stylesheet" type="text/css" href="/css/font-awesome.css">
    <script src="/js/jquery.min.js"></script>
    <script type="text/javascript">
        function noticeUp(obj) {
            $(obj).find(":first").appendTo(obj);
        }
        $(function () {
            setInterval("noticeUp('.notice ul')", 3000);
        });
    </script>
</head>
<nav th:fragment="nav">
    <div class="container" id="nav">
        <div class="navbar-header logo-site">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#header-navbar" aria-expanded="false"><span class="sr-only"></span> <span
                    class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
            <h1 class="logo hvr-bounce-in">
                <a href="/blog" title="木庄网络博客">木庄网络博客</a>
            </h1>
        </div>
        <div class="collapse navbar-collapse" id="header-navbar" name="index">
            <ul class="nav navbar-nav navbar-right" id="selectNav">
                <li v-for="(item,index) in navList" :class="{'jiantou':item.hasChildren}" @click="changeBgc(index,'','')">
                    <a :title="item.text" v-if="item.attributes.url" href="javascript:;" @click="changeBgc(index,item.attributes.url,1)"><i :class="item.attributes.icon"></i> {{item.text}}</a>
                    <a :title="item.text" v-else href="javascript:;"><i :class="item.attributes.icon"></i> {{item.text}}</a>
                    <ul v-if="item.hasChildren">
                        <li v-for="children in item.children"><a href="javascript:;" @click="changeBgc(index,children.id,2)">{{children.text}}</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div th:fragment="aside">
    <div id="aside_vue">
        <div class="fixed">
            <div class="widget widget-tabs hidden">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#notice" aria-controls="notice" role="tab"
                                                              data-toggle="tab">统计信息</a></li>
                    <li role="presentation"><a href="#contact" aria-controls="contact" role="tab"
                                               data-toggle="tab">联系站长</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane contact active" id="notice">
                        <h2>日志总数:
                           123
                        </h2>
                        <h2>网站运行:
                            <span id="sitetime"></span></h2>
                    </div>
                    <div role="tabpanel" class="tab-pane contact" id="contact">
                        <h2>交流QQ群:
                            <a href="https://jq.qq.com/?_wv=1027&k=4205AJJ"  rel="nofollow"
                               data-toggle="tooltip" data-placement="bottom" title="QQ群:562366239">562366239</a>
                        </h2>
                        <h2>Email:
                            <a href="mailto:admin@muzhuangnet.com"  data-toggle="tooltip" rel="nofollow"
                               data-placement="bottom" title="Email:admin@muzhuangnet.com">admin@muzhuangnet.com</a>
                        </h2>
                    </div>
                </div>
            </div>
            <div class="widget widget_search">
                <form class="navbar-form" id="searchform">
                    <div class="input-group">
                        <input type="text" class="form-control" size="40" placeholder="搜索关键字" id="keywords" name="keywords" maxlength="15" autocomplete="off"/>
                    </div>
                </form>
            </div>
        </div>
        <div class="widget widget_sentence">
            <h3>标签云</h3>
            <div class="widget-sentence-content">
                <ul class="plinks ptags" id="dom-tag"></ul>
            </div>
        </div>
        <div class="widget widget_hot">
            <h3>热门文章</h3>
            <ul id="dom-hits"></ul>
        </div>
        <div class="widget widget_sentence">
            <h3>友情链接</h3>
            <div class="widget-sentence-content" id="dom-link"></div>
        </div>
    </div>
</div>
<div th:fragment="footer">
    <footer class="footer">
        <div class="container">
            <p>本站[<a href="http://www.muzhuangnet.com/">木庄网络博客</a>]的部分内容来源于网络，若侵犯到您的利益，请联系站长删除！谢谢！Powered By [<a
                    href="http://www.dtcms.net/"  rel="nofollow">DTcms</a>] Version 4.0 &nbsp;<a
                    href="http://www.miitbeian.gov.cn/"  rel="nofollow">闽ICP备14015154号-3</a> &nbsp; <a
                    href="http://www.muzhuangnet.com/sitemap.xml"  class="sitemap">网站地图</a> &nbsp; <a
                    href="http://www.muzhuangnet.com/sitemap.html"  class="sitemap">站点地图</a></p>
        </div>
        <div id="gotop"><a class="gotop"></a></div>
    </footer>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/jquery.ias.js"></script>
    <script src="/js/jquery.cookie.js"></script>
    <script src="/js/appjs/blog/blog.js"></script>
    <script src="/js/appjs/blog/jquery.pagination.js"></script>
    <!-- vue -->
    <script type="text/javascript" src="/js/vue.min.js"></script>
    <script type="text/javascript" src="/js/vue-resource.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#nav',
            mounted: function () {
                this.$nextTick(function () {
                    this.navView();
                });
            },
            data: {navList: []},
            methods: {
                navView: function () {
                    this.$http.get("/blog/getMenu").then(res=>{
                        if (res.status == 200){
                            this.navList = res.data;
                        }
                    });
                },
                changeBgc: function (index,data,num) {
                    this.isSelect = index;
                    $.cookie('isSelect', index);
                    console.log(data);
                    if(num == 2){
                       window.location.href = '/blog/article/list/'+data;
                    }
                    if(num == 1){
                        window.location.href = data;
                    }
                }
            },
        });
        $(function () {
            $.get('/blog/tag/list',function(res){
                var data = res.rows;
                var html = '';
                for(var i=0;i<data.length;i++){
                    html += '<li>\n' +
                        '<a href="/blog/tag/list/'+data[i].tagId+'" title="'+data[i].tagName+'">'+data[i].tagName+'</a>\n' +
                        '</li>';
                }
                $('#dom-tag').html(html);
                $("#dom-tag li a").each(
                    function () {
                        $(this).css('color', '#282828');
                        $(this).css('background', '#fff')
                    }
                );
            });

            $.get('/blog/link/list',function (res) {
                var data = res.rows;
                var html = '';
                for(var i=0;i<data.length;i++){
                    html += '<a href="'+data[i].linkUrl+'" title="'+data[i].linkTitle+'" >'+data[i].linkName+'</a>&nbsp;&nbsp;&nbsp;';
                }
                $('#dom-link').html(html);
            });
            var hitsData = {limit:5,offset:0,sort:'hits',order:'desc'};
            $.get('/blog/list',hitsData,function (res) {
                var data = res.rows;
                var html = '';
                for(var i=0;i<data.length;i++){
                    html += '<li><a title="'+data[i].title+'" href="/blog/detail?cid='+data[i].cid+'">' +
                                '<span class="thumbnail">\n' +
                                    '<img class="thumb" src="'+data[i].images+'" alt="'+data[i].title+'"/>\n' +
                                '</span>' +
                                '<span class="text">'+data[i].title+'</span>' +
                                '<span class="muted"><i class="glyphicon glyphicon-time"></i> '+data[i].gtmCreate.substr(0,10)+'</span>\n '+
                                '<span class="muted"><i class="glyphicon glyphicon-eye-open"></i> '+data[i].hits+'</span></a>\n' +
                            '</li>';
                }
                $('#dom-hits').html(html);
            })
        });
    </script>
</div>

